<template>
  <div>
    <i class="out fa fa-angle-left" @click="out" aria-hidden="true"></i>
    <div class="nav" v-if="songNav">
      <div class="bgcimgs">
        <img :src="`${songNav.playlist.coverImgUrl}`" />
        
      </div>
      <div class="imgs">
        <img :src="`${songNav.playlist.coverImgUrl}`" />
        <i>歌单</i>
        <div class="icon">
          <i>{{ songNav.playlist.playCount | formatNum(2) }}</i>
        </div>
      </div>
      <div class="fu">
        <h1>{{ songNav.playlist.name }}</h1>
        <img :src="`${songNav.playlist.creator.avatarUrl}`" />
        <span>{{ songNav.playlist.creator.nickname }}</span>
      </div>
      <div class="all">
        <button @click="$emit('all',songList)">播放全部</button>
      </div>
    </div>
    <loading v-if="songList.length == 0"></loading>
    <every-music
      :playMUsicID="playMUsicID"
      @play="$emit('play', $event)"
      :songlist="songList"
      :shownum="true"
      v-else
    ></every-music>

    <h3 class="lite">最新评论</h3>
    <div v-for="musicComment in comment" :key="musicComment.id">
      <ul class="commentUl">
        <li><img :src="musicComment.user.avatarUrl" /></li>
        <li>
          <div class="name">
            <h5>
              {{ musicComment.user.nickname }}
              <i
                v-if="musicComment.user.vipRights"
                class="fa fa-vimeo-square"
                aria-hidden="true"
              ></i>
            </h5>
            <b class="date">{{
              musicComment.time | timeFilter("YYYY年MM月dd日")
            }}</b>
            <!-- <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> -->
          </div>
          <span class="comment">{{ musicComment.content }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import EveryMusic from "../components/EveryMusic.vue";
export default {
  props: {
    listid: [String, Number],
    playMUsicID: Number,
  },
  data() {
    return {
      songList: [],
      songNav: null,
      comment: [],
    };
  },
  methods: {
    out() {
      this.$router.back()
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios.get(`/playlist/detail?id=${vm.listid}`).then((result) => {
        //   console.log(result.data); coverImgUrl   description   playCount: 364247
        //creator avatarUrl
        vm.songNav = result.data;
        let re = result.data.playlist.tracks.map((v, index) => {
          v.song = {
            privilege: result.data.privileges[index],
            artists: v.ar,
            album: v.al,
          };
          return v;
        });
        vm.songList = re;
        // console.log("vm.songNav",vm.songNav);
      });
      //调用评论,
      vm.axios.get(`/comment/playlist?id=${vm.listid}`).then((result) => {
        console.log("评论==>", result);
        vm.comment = result.data.comments;
      });
    });
  },
  filters: {
    timeFilter(val, temp) {
      let data = new Date(val);
      let o = {
        Y: data.getFullYear(),
        M: data.getMonth() + 1,
        d: data.getDate(),
        h: data.getHours(),
        m: data.getMinutes(),
        s: data.getSeconds(),
      };
      for (let key in o) {
        let reg = new RegExp(key + "+");
        if (reg.test(temp)) {
          temp = temp.replace(reg, o[key]);
        }
      }
      return temp;
    },
  },
  components: { EveryMusic },
};
</script>

<style lang="less" scoped>
.out{
  position: absolute;
  z-index: 10;
  top: 3px;
  font-size: 28px;
  display: inline-block;
  left: 5px;
  color: white;
}
.nav {
  width: 100vw;
  height: 49.5vw;
  position: relative;
  .bgcimgs {
    img {
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      height: 49.5vw;
      background-position: 50%;
      filter: blur(15px);
      background-color: rgba(0, 0, 0, 0.5);
    }
   
  }
  .imgs {
    img {
      padding: 0px 15px;
      height: 126px;
      width: 126px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    i {
      position: absolute;
      left: 15px;
      top: 40px;
      z-index: 2;
      font-size: 9px;
      background-color: rgba(217, 48, 48, 0.8);
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      padding: 0px 8px;
      color: #fff;
    }
    div {
      height: 15px;
      width: 126px;
      position: absolute;
      left: 14px;
      top: 26px;
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      //   padding: 2px 0px 0px 14px;
      i {
        background-image: url();
        background-repeat: no-repeat;
        background-size: 13px;
        background-position: left center;
        position: absolute;
        left: 63px;
        top: 1px;
        color: white;
        z-index: 5;
        width: 50px;
        height: 13px;
        background-color: transparent;
        padding: 0px 16px;
      }
    }
  }
  .fu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-15%, -68%);
    h1 {
      font-size: 17px;
      color: #fefefe;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    span {
      position: absolute;
      left: 19%;
      top: 63%;
      color: #fefefe;
    }
  }
  .all {
    position: absolute;
    left: 43%;
    bottom: 20%;
    button {
      border-radius: 5px;
      border: none;
      line-height: 20px;
    }
  }
}
.lite {
  margin-top: 5px;
  background: #f2f2f2;
  font-size: 12px;
  color: #666;
  padding-left: 10px;
}
.commentUl {
  display: flex;
  width: 100vw;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  li {
    &:first-child {
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 10px 10px 10px 10px;
      }
    }
    &:nth-child(2) {
      flex: 1;
      padding-top: 10px;
      position: relative;
      div {
        h5 {
          font-size: 13px;
          color: #666;
        }
        b {
          display: block;
          padding: 2px 0px 10px 0px;
          color: #999;
          font-size: 9px;
        }
        .fa-thumbs-o-up {
          position: absolute;
          top: 15px;
          right: 15px;
        }
        .fa-vimeo-square {
          padding-left: 5px;
          color: #ffd700;
        }
        .ative {
          color: red;
        }
      }
      span {
        font-size: 15px;
        color: #333;
        line-height: 22px;
      }
    }
  }
}
</style>